<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<link href="https://cdn.bootcss.com/minireset.css/0.0.2/minireset.css" rel="stylesheet">
<style>
  table {
    border-collapse: collapse;
    border: none;

  }

  td {
    border: solid #000 1px;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
  }

</style>

<body>
  <div id="app">
    <table>
      <tr v-for="(item,ii) in list">
        <td>{{ii}}</td>
        <td v-for="(mun,index) in 10">
          <span v-if="index==item">
            {{item}}
          </span>
        </td>
      </tr>
    </table>
  </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.3/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      data: 1,
      list: []
    },
    created() {
      this.getData()
    },
    methods: {
      getData() {
        let that = this;
        axios.get('./dist/tail.json').then(res => {
          that.list = res.data;
          console.log(res.data)
        })
      }
    },
    filter: {
      format(val, index) {
        return 666
      }
    }
  })

</script>

</html>
